<template>
  <div id="todo">
    <el-form :inline="true" :model="searchData" class="demo-form-inline">
      <el-form-item label="流水号">
        <el-input v-model="searchData.myls"></el-input>
      </el-form-item>
      <el-form-item label="申请类型">
        <el-select v-model="searchData.mytype" placeholder="请选择">
          <el-option label="事假" value="事假"></el-option>
          <el-option label="年假" value="年假"></el-option>
          <el-option label="病假" value="病假"></el-option>
          <el-option label="外勤" value="外勤"></el-option>
          <el-option label="会议申请" value="会议申请"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作时间">
        <div class="block">
          <el-date-picker
            v-model="searchData.mytime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="info" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div id="line"></div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="myls" label="流水号"> </el-table-column>
      <el-table-column prop="mytype" label="申请类型"> </el-table-column>
      <el-table-column prop="name" label="发起人"> </el-table-column>
      <el-table-column prop="department_name" label="所属部门">
      </el-table-column>
      <el-table-column prop="mystate" label="当前环节"> </el-table-column>
      <el-table-column prop="mytime" label="申请时间"> </el-table-column>
      <el-table-column prop="operation" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="msg(scope.row)" size="small"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block block2">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="count"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalpage"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="审核申请"
      :visible.sync="leave"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="leavedata">
        <el-form-item label="流水号">
          <el-input
            v-model="leavedata.mun"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-input
            v-model="leavedata.type"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="发起人">
          <el-input
            v-model="leavedata.name"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="所属部门" disabled>
          <el-input
            v-model="leavedata.department_name"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="请假时间">
          <el-input
            v-model="leavedata.applytime"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-input
            v-model="leavedata.starttime"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-input
            v-model="leavedata.endtime"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="leave = false">不同意</el-button>
        <el-button type="primary" @click="leaveagree(leavedata.mun)"
          >同意</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="会议申请"
      :visible.sync="meeting"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="meetingdata">
        <el-form-item label="流水号">
          <el-input
            v-model="meetingdata.meeting_num"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="会议室标题">
          <el-input
            v-model="meetingdata.meeting_tit"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="申请时间">
          <el-input
            v-model="meetingdata.meeting_todotime"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="发起人">
          <el-input
            v-model="meetingdata.name"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="所属部门" disabled>
          <el-input
            v-model="meetingdata.department_name"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-input
            v-model="meetingdata.meeting_startime"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-input
            v-model="meetingdata.meeting_endtime"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="会议室">
          <el-input
            v-model="meetingdata.metroom_name"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="meeting = false">不同意</el-button>
        <el-button type="primary" @click="meetingagree(meetingdata.meeting_id)"
          >同意</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        myls: "",
        mytype: "",
        mytime: "",
      },
      searchData2: [],
      totaldata: [],
      currentPage4: 1,
      leave: false,
      meeting: false,
      count: 5,
      leavedata: {},
      meetingdata: {},
      mypage: "",
    };
  },
  methods: {
    onSubmit() {
      this.currentPage4 = 1;
      if (
        this.searchData.myls ||
        this.searchData.mytype ||
        this.searchData.mytime
      ) {
        let myls = this.searchData.myls ? this.searchData.myls : "";
        let mytype = this.searchData.mytype ? this.searchData.mytype : "";
        let mytime = this.searchData.mytime ? this.searchData.mytime : "";
        this.page = 1;
        this.searchData2 = [myls, mytype, mytime];
      } else {
        this.searchData = "";
      }
    },
    reset() {
      this.currentPage4 = 1;
      this.show();
      this.totaldata = [];
      this.searchData = {};
      this.searchData2 = [];
    },
    handleSizeChange(n) {
      this.count = n;
    },
    handleCurrentChange(n) {
      this.currentPage4 = n;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    msg(n) {
      if (n.applytime) {
        this.leave = true;
        this.leavedata = n;
      } else {
        this.meeting = true;
        this.meetingdata = n;
      }
    },
    leaveagree(l) {
      this.$axios({
        url: "/personalcenter/todo/changeone",
        params: { mun: l, time: new Date() },
      }).then((res) => {
        this.leave = false;
        this.reset();
      });
    },
    meetingagree(m) {
      this.$axios({
        url: "/personalcenter/todo/changetwo",
        params: { id: m, time: new Date() },
      }).then((res) => {
        this.meeting = false;
        this.reset();
      });
    },
    show() {
      // console.log(this.$store.state.data.jobs);
      this.$axios({
        url: "/personalcenter/todo/getone",
        params: {
          jobs: JSON.parse(sessionStorage.getItem("user")).jobs,
          mytype: "待审核",
        },
      }).then((res) => {
        res.data.data.forEach((v, i) => {
          v.myls = v.mun;
          v.mystate = v.state;
          v.mytime = v.applytime;
          v.mytype = v.type;
          this.totaldata.push(v);
        });
      });
      this.$axios({
        url: "/personalcenter/todo/gettwo",
        params: {
          jobs: JSON.parse(sessionStorage.getItem("user")).jobs,
          mytype: "待审核",
        },
      }).then((res) => {
        res.data.data.forEach((v, i) => {
          v.myls = v.meeting_num;
          v.mystate = v.meeting_state;
          v.mytime = v.meeting_todotime;
          v.mytype = "会议申请";
          this.totaldata.push(v);
        });
      });
    },
  },
  created() {
    this.show();
  },
  computed: {
    totalpage: function () {
      if (this.searchData2.length != 0) {
        return this.mypage;
      } else {
        return this.totaldata.length;
      }
    },
    tableData: function () {
      if (this.searchData2.length != 0) {
        this.mypage = 0;
        let arr = [];
        for (let i = 0; i < this.totaldata.length; i++) {
          if (
            new Date(this.totaldata[i].mytime) >=
              new Date(this.searchData2[2][0]) &&
            new Date(this.totaldata[i].mytime) <=
              new Date(this.searchData2[2][1]) &&
            this.totaldata[i].myls == this.searchData2[0] &&
            this.totaldata[i].mytype == this.searchData2[1]
          ) {
            arr.push(this.totaldata[i]);
            console.log(1);
          } else if (
            new Date(this.totaldata[i].mytime) >=
              new Date(this.searchData2[2][0]) &&
            new Date(this.totaldata[i].mytime) <=
              new Date(this.searchData2[2][1]) &&
            this.totaldata[i].myls == this.searchData2[0]
          ) {
            arr.push(this.totaldata[i]);
            console.log(2);
          } else if (
            this.totaldata[i].myls == this.searchData2[0] &&
            this.totaldata[i].mytype == this.searchData2[1]
          ) {
            arr.push(this.totaldata[i]);
            console.log(this.totaldata[i].myls, this.totaldata[i].mytype);
            console.log(3);
          } else if (
            new Date(this.totaldata[i].mytime) >=
              new Date(this.searchData2[2][0]) &&
            new Date(this.totaldata[i].mytime) <=
              new Date(this.searchData2[2][1]) &&
            this.totaldata[i].mytype == this.searchData2[1]
          ) {
            arr.push(this.totaldata[i]);
            console.log(4);
          } else if (
            this.totaldata[i].mytype == this.searchData2[1] &&
            this.searchData2[0] == "" &&
            this.searchData2[2] == ""
          ) {
            arr.push(this.totaldata[i]);
            console.log(7);
          } else if (
            this.totaldata[i].myls == this.searchData2[0] &&
            this.searchData2[2] == "" &&
            this.searchData2[1] == ""
          ) {
            arr.push(this.totaldata[i]);
            console.log(this.searchData2[1]);
          } else if (
            new Date(this.totaldata[i].mytime) >=
              new Date(this.searchData2[2][0]) &&
            new Date(this.totaldata[i].mytime) <=
              new Date(this.searchData2[2][1]) &&
            this.searchData2[0] == "" &&
            this.searchData2[1] == ""
          ) {
            arr.push(this.totaldata[i]);
            console.log(6);
          }
        }
        this.mypage = arr.length;
        return arr.slice(
          (this.currentPage4 - 1) * this.count,
          this.currentPage4 * this.count
        );
      } else {
        return this.totaldata.slice(
          (this.currentPage4 - 1) * this.count,
          this.currentPage4 * this.count
        );
      }
    },
  },
};
</script>
<style lang="less" scoped>
#todo {
  background-color: white;
  height: 100%;
  padding: 20px;
}
.el-form-item {
  margin-right: 20px;
}
#line {
  width: 100%;
  height: 0.1px;
  background-color: #e5e5e5;
  margin-bottom: 20px;
}
#process {
  margin-bottom: 20px;
}
.block2 {
  margin-top: 30px;
  text-align: right;
}
.el-tag {
  width: 80%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
.el-col {
  margin-bottom: 20px;
}
a {
  text-decoration: none;
  color: #60aeff;
}
.el-dialog__body {
  .el-input {
    width: 75%;
    float: right;
  }
  .el-date-editor {
    width: 75% !important;
  }
}
</style>